<template>
  <div class="login-container">
    <el-form
      ref="ruleFormRef"
      :model="newUserForm"
      :rules="newUserRules"
      class="login-form"
    >
      <h3 class="title">注册</h3>
      <el-form-item prop="username">
        <el-input
          v-model="newUserForm.username"
          placeholder="请输入用户名"
          clearable
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="newUserForm.password"
          placeholder="请输入密码"
          show-password
          clearable
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input
          v-model="newUserForm.confirmPassword"
          placeholder="请再次输入密码"
          show-password
          clearable
          style="width: 100%"
        />
      </el-form-item>
      <div class="enroll">
        我已经注册,去<router-link to="/login/logon">登录</router-link>
      </div>
      <el-form-item class="form-button">
        <el-button type="primary" style="width: 100%" @click="enrollForm">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useEnroll } from "./Hooks/useEnroll"

const { newUserForm, newUserRules, ruleFormRef,enrollForm } = useEnroll()
</script>

<style scoped>
.login-container {
  /* margin: auto; */
  margin-top: 80px;
  width: 400px;
  height: 200px;
}
.login-form {
  margin:0 60px;
}
.login-container .title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0px auto 40px auto;
  text-align: center;
  font-weight: bold;
}
.enroll{
  margin: 0px 0px 20px 60px;
  color: #f4f7f7;
}
.enroll a{
  color: #f06868;
}
</style>
